<template>

    <div class="login">

        <div class="form">
            <div class="title">
                <span>管理员登录</span>
            </div>
            <div class="opt">
                <div class="label"><el-icon>
                        <User />
                    </el-icon></div>
                <div class="inpbox"><input type="text" v-model="user.account" placeholder="请输入账号或邮箱"></div>
            </div>
            <div class="opt">
                <div class="label"><el-icon>
                        <Lock />
                    </el-icon></div>
                <div class="inpbox"><input type="password" v-model="user.password" placeholder="请输入密码"></div>

            </div>
            <div class="opt">
                <div class="label"><el-icon>
                        <PictureFilled />
                    </el-icon></div>
                <div class="inpbox"><input type="text" v-model="user.captcha" placeholder="请输入验证码"></div>
                <div class="vcode"><canvas @click="getVerify" ref="canvas"></canvas></div>
            </div>
            <div class="opt">
                <router-link to="/findpwd">忘记密码？</router-link>
            </div>
            <div class="opt">
                <button class="btn btn-login" @click="singinFn">登录</button>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { onMounted, ref } from 'vue';
import api from '../api/index';
import { ElMessage } from 'element-plus'
import { singin, test } from '../api/request'
import { useRoute, useRouter } from 'vue-router'
import router from '@/router';
// import router from '@/router';


// 定义变量 记录程序所需的数据
let canvas = ref();
let pen: any;
let w: number = 100;
let h: number = 40;
let host: string = api.url
// 记录表单信息
type U = {
    account: string
    password: string
    captcha: string
}
let user = ref<U>({
    account: '',
    password: '',
    captcha: ''
})
// 获取路由实例对象
const $router = useRouter();


// 编写登录函数
const singinFn = async () => {
    let { account, password, captcha } = user.value;

    if (account && password && captcha) {
        // 先验证是否为机器人
        let isShow;
        await test({ captcha })

            .then(
                content => {
                    // console.log(content);
                    if (content.code == 200) {
                        // 执行登录逻辑
                        isShow = true
                    }
                    else {
                        // 验证失败
                        ElMessage({
                            type: 'error',
                            message: content.msg

                        })
                    }

                }
            )
        if (isShow) {
            // 执行登录逻辑
            await singin({ account, password, role: 1 })
                .then(
                    content => {
                        let { code, msg } = content;
                        // name: 'layout',(content);
                        if (code == 200) {
                            let { nickName, token } = content
                            // 利用本地存储用户昵称和临时身份
                            localStorage.setItem('NICK_NAME', nickName)
                            localStorage.setItem('TOKEN', token)
                            // 登陆成功
                            ElMessage({
                                type: 'success',
                                message: content.msg
                            })
                            // 延迟跳转首页
                            setTimeout(() => {
                               $router.replace({path:'/'})
                            }, 150)
                        }
                        else {
                            //登录失败
                            ElMessage({
                                type: 'error',
                                message: content.msg

                            })
                        }
                    }
                )
        }

    }
    else {

        // console.log(222);
        ElMessage({
            type: 'error',
            message: '输入框不能为空',


        })
    }
}

// 挂载钩子函数（初始化）
onMounted(() => {
    let ele = canvas.value;
    let img = new Image();
    img.src = `${host}/api/verify/captcha`
    if (ele) {
        ele.width = w;
        ele.heigth = h;
        pen = ele.getContext('2d');
        pen.fillStyle = "#f0f0f0";
        pen.strokeStyle = "#cccccc";
        pen.fillRect(0, 0, w, h);
        pen.strokeRect(0, 0, w, h);

        img.onload = () => {
            pen.drawImage(
                img,
                0,
                0,
                w,
                h

            )

        }
    }
})

// 点击获取验证码
const getVerify = () => {
    // console.log(11111);

    let img = new Image();

    img.src = `${host}/api/verify/captcha?${Math.random()}`
    // 先清除画布
    pen.clearRect(0, 0, w, h);
    // 再渲染
    pen.fillStyle = "#f0f0f0";
    pen.strokeStyle = "#cccccc";
    pen.fillRect(0, 0, w, h);
    pen.strokeRect(0, 0, w, h);

    img.onload = () => {


        pen.drawImage(
            img,
            0,
            0,
            w,
            h
        )

    }
}

</script>
<style lang="scss">
@import '../common/variable.scss';

.login {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    // background-color: pink;
    background-image: url(../common/imgs/bg3.jpeg);
    background-size: cover;

    .form {
        width: 450px;
        // margin: 100px auto;
        border: 1px solid #ccc;
        padding: 15px 20px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(#000, .5);


        .title {
            padding: 20px 0;
            text-align: center;

            span {
                display: inline-block;
                border-bottom: 2px solid $dlbgColor;
                padding: 10px 10px;
                color: $dlbgColor;
            }
        }

        .opt {
            display: flex;
            width: 100%;
            height: 40px;
            margin-bottom: 10px;

            .label {
                width: 50px;
                height: 40px;
                background-color: #EFF5FF;
                border: 1px solid #ccc;
                border-right: 0;
                // 不允许缩小
                flex-shrink: 0;
                text-align: center;
                line-height: 40px;
            }

            .inpbox {
                width: calc(100% - 50px);

                input {
                    font-size: 16px;
                    height: 40px;
                    line-height: 40px;
                    display: block;
                    border: 1px solid #ccc;
                    width: 100%;
                    padding-left: 10px;
                    // background-color: ;



                }

            }

            a {
                color: #666666;
                font-size: 15px;
            }

            .btn {
                width: 100%;
                height: 40px;
                background-color: $dlbgColor ;
                color: #fff;
                border-radius: 5px;
                cursor: pointer;
            }

            canvas {
                cursor: pointer;
                margin-left: 10px;
            }
        }
    }
}
</style>